<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="110px" class="app-content" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">经销商账户信息补全&ensp;&ensp;第<span class='step'><span v-if='temp==0 && ruleForm1.agentIdentfy==0'> 1/4 </span><span v-if='temp==1 && ruleForm1.agentIdentfy==0'> 2/4 </span> <span v-if='temp==2 && ruleForm1.agentIdentfy==0'> 3/4 </span><span v-if='temp==3 && ruleForm1.agentIdentfy==0'> 4/4 </span><span v-if='temp==0 && ruleForm1.agentIdentfy==1'> 1/3 </span><span v-if='temp==2 && ruleForm1.agentIdentfy==1'> 2/3 </span><span v-if='temp==3 && ruleForm1.agentIdentfy==1'> 3/3 </span></span>步</div>
                <div v-if="temp==0">
                    <div class="appTop"><P>选择账户种类</p></div>
                    <el-row>
                        <el-col :span="15" class='introduce'>
                            <p>若您的合同签署的主体是公司，请绑定贵司的对公账户；</p>

                            <p>若您的合同签署的主体是个人，还请绑定签署合同本人的银行卡信息；</p>

                            <p>如有任何疑问请联系客服，客服热线 400-6002-588。</p>

                            <p class='step'>还请谨慎选择，否则审核不予通过。</p>
                        </el-col>   
                    </el-row>
                    <el-row>
                        <el-col class="boxTop" :span="8">
                        <div @click="selectBtn1" style="width:100%;height:100%">
                            <div class="btName">
                                <el-col :span="16">
                                    <el-row>
                                        <span>我是个人账户</span>
                                    </el-row>
                                    <p>我以个体的名义签订的合同</p>
                                </el-col>
                                <el-col :span="6" class='mTop'>
                                    <div class="btn" v-bind:class="{ btn2: activeColor1 }">
                                        <div class='bgImg'></div>
                                    </div>
                                </el-col>
                            </div>
                        </div>
                        </el-col>
                        <el-col class="boxTop" :span="8" style='margin-left:30px'>
                        <div @click="selectBtn2" style="width:100%;height:100%">
                            <div class="btName">
                                <el-col :span="16">
                                    <el-row>
                                        <span>我是对公账户</span>
                                    </el-row>
                                    <p>我以公司的名义签订的合同</p>
                                </el-col>
                                <el-col :span="6" class='mTop'>
                                    <div class="btn" v-bind:class="{ btn2: activeColor2 }">
                                        <div class='bgImg'></div>
                                    </div>
                                </el-col>
                            </div>
                        </div>
                        </el-col>
                    </el-row>
                </div>

                <div v-if="temp==1">
                    <div class="appTop"><P>上传营业执照</p></div>
                    <el-row class="boxContent">
                        <el-col :span="4">
                            <img-upload v-model="ruleForm1.sPicture1" :showFileName="true"></img-upload>
                        </el-col>                   
                        <el-col :span="12" :offset='6'>
                            <el-col :span="18" class='require'>
                                <p>营业执照上传要求：</p>
                                <p>1.营业执照需要与e学云签订合同一致；</p>
                                <p>2.照片不可被遮挡，内容清晰可见，不得做任何修改；</p>
                                <p>3.支持png、jpg、bmp等不大于5M的照片；</p>
                                <div class="clickImg" @click="clickImg1">
                                    <img :src="urlImg1"/>
                                </div>
                                <p class='imgAddBig1'>示例图（点击可放大）</p>
                            </el-col>
                        </el-col>
                    </el-row>

                    <div class="appTop"><P>上传开户许可证</p></div>
                    <el-row class="boxContent">
                        <el-col :span="4">
                            <img-upload v-model="ruleForm1.sPicture2" :showFileName="true"></img-upload>
                        </el-col>                   
                        <el-col :span="12" :offset='6'>
                            <el-col :span="18" class='require'>
                                <p>开户许可证上传要求：</p>
                                <p>1.照片不可被遮挡，内容清晰可见，不得做任何修改；</p>
                                <p>2.支持png、jpg、bmp等不大于5M的照片；</p>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
                
                <div v-if="temp==2">
                    <identfy :ruleForm2='ruleForm2' ref='identfy' @getSubmitIdfy='getSubmitIdfy'></identfy>
                </div>
                <div v-if="temp==3">
                    <fillInfo :ruleForm3='ruleForm3' ref='fillInfo' @getSubmitForm='getSubmitForm'></fillInfo>
                </div>
                <el-form-item class="footer1" v-if='temp==0'>
                    <el-button type="primary" @click='nextStep' v-if="temp<3">下一步</el-button>
                </el-form-item>
                <el-form-item class="footer2" v-if='temp!=0'>
                    <el-button @click='lastStep' v-if="temp>0">上一步</el-button>
                    <el-button type="primary" @click='nextStep' v-if="temp<3">下一步</el-button>
                    <el-button type="primary" @click='saveIdfy' v-if="temp==3" :loading="loadingBtn">提交</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-dialog :visible.sync="dialogFormVisible" size="tiny" title="营业执照">
            <div class='checkImg2'><img :src="bigImgUrl"/></div>
        </el-dialog>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import imgUpload from 'components/Upload/imgUpload';
import identfy from './comps/identfy';
import fillInfo from './comps/fillInfo';
import { saveOrgAccount } from 'api/accountMangement';
import { mapGetters } from 'vuex';
export default{
    name: 'makeAccount',
    components: {Levelbar, imgUpload, identfy, fillInfo},
    data() {
        return {
            ruleForm: {},
            ruleForm1: {
                sPicture1: '',
                sPicture2: '',
                agentIdentfy: 1
            },
            ruleForm2: {
                wTname: '',
                identity: '',
                sCardFace: '',
                sCardBack: '',
                agentIdentfy: ''
            },
            ruleForm3: {
                bankAccountName: '', // 账户
                accountName: '', // 用户名
                bankAccountId: '',
                fProvinceId: '',
                bankBranchName: '',
                phone: '',
                fyCode: '',
                fCityId: '',
                judge: false,
                idfyCode: '获取验证码'
            },
            activeColor1: true,
            activeColor2: false,
            addImportData: {
                dialogLotImport: false,
                fileDocx: ''
            },
            urlImg1: 'http://test.img.juziwl.cn/exue/20171116/1175a137d6934ac1b02d64a947175e11.png',
            urlImg2: '',
            bigImgUrl: '',
            temp: '0',
            loadingBtn: false,
            dialogFormVisible: false,
            rules: {}
        }
    },
    computed: {
        ...mapGetters(['uid'])
    },
    methods: {
        saveIdfy() {
            this.$refs.fillInfo.submitForm()
        },
        // 验证通过下一步
        getSubmitIdfy() {
            this.ruleForm3.name = this.ruleForm2.wTname;
            this.temp++;
        },
        // 验证通过保存
        getSubmitForm() {
            this.$confirm('确定要提交吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loadingBtn = true;
                saveOrgAccount(
            this.ruleForm1.agentIdentfy,
            this.ruleForm1.sPicture1, 
            this.ruleForm1.sPicture2, 
            this.ruleForm2.sCardFace,
            this.ruleForm2.sCardBack,
            this.ruleForm2.wTname, 
            this.ruleForm3.bankAccountName,
            this.ruleForm2.identity, 
            this.ruleForm3.accountName,
            this.ruleForm3.bankAccountId, 
            this.ruleForm3.fProvinceId,
            this.ruleForm3.fCityId,
            this.ruleForm3.bankBranchName, 
            this.ruleForm3.phone,
            ).then(response => {
                this.$message({
                    type: 'success',
                    message: '提交成功!'
                })
                this.$router.push({path: 'accountDetail'});
            }).catch(() => {
                this.loadingBtn = false;
            });
            })
        },
        // 重置样式
        resert() {
            this.ruleForm1.sPicture1 = '';
            this.ruleForm1.sPicture2 = '';
            this.ruleForm2.sCardFace = '';
            this.ruleForm2.sCardBack = '';
            this.ruleForm2.wTname = '';
            this.ruleForm3.bankAccountName = '';
            this.ruleForm2.identity = '';
            this.ruleForm3.accountName = '';
            this.ruleForm3.bankAccountId = '';
            this.ruleForm3.fProvinceId = '';
            this.ruleForm3.fCityId = '';
            this.ruleForm3.bankBranchName = '';
            this.ruleForm3.phone = '';
            this.ruleForm3.name = '';
        },
        // 切换
        selectBtn1() {
            this.ruleForm1.agentIdentfy = 1;
            this.activeColor1 = true;
            this.activeColor2 = false;
            this.resert();
        },
        selectBtn2() {
            this.ruleForm1.agentIdentfy = 0;
            this.activeColor2 = true;
            this.activeColor1 = false;
            this.resert();
        },
        // 模板图片放大
        clickImg1() {
            this.dialogFormVisible = true;
            this.bigImgUrl = this.urlImg1;
        },
        clickImg2() {
            this.dialogFormVisible = true;
            this.bigImgUrl = this.urlImg2;
        },
        // 上一步
        lastStep() {
            if (this.temp==2 && this.ruleForm1.agentIdentfy==1) {
                this.temp = 0;
            } else {
                this.temp--;
            }
        },
        // 下一步
        nextStep() {
            if (this.temp==0) {
                if (this.ruleForm1.agentIdentfy==1) {
                    this.ruleForm2.agentIdentfy = 1;
                    this.temp = 2;
                } else {
                    this.temp++;
                }
                return;
            } else if (this.temp==1) {
                if (this.ruleForm1.sPicture1=='') {
                    this.$message({
                        type: 'warning',
                        message: '请上传营业执照'
                    });
                    return;
                } else if (this.ruleForm1.sPicture2=='' && this.addImportData.fileDocx=='') {
                    this.$message({
                        type: 'warning',
                        message: '请上传开户许可证'
                    });
                    return;
                } else {
                    this.ruleForm2.agentIdentfy = 0;
                    this.temp++;
                    return
                }
            } else if (this.temp==2) {
                this.$refs.identfy.submitForm();
            } else {
                this.temp++;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding: 30px 15% 50px 15%;
        .appTop{
            padding:40px 0 20px 0px;
            margin-bottom:30px;
            font-size:36px;
        }
        .boxContent{
            padding-top:50px
        }
        .box{
            margin:0 20px 0 20px;
            min-height:600px;
            background:#fff;
            .boxTop{
            cursor:pointer;
            width: 460px;
            height: 200px;
            background-color: #ffffff;
            box-shadow: 0px 0px 20px 3px 
            rgba(153, 153, 153, 0.1);
                .btName{
                    height:28px;
                    line-height:28px;
                    margin:30px 0 10px 80px;
                    span{
                        margin-left:10px;
                        float:left;
                        font-family: MicrosoftYaHei;
                        font-size: 24px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 0px;
                        color: #333333;
                        margin-top:30px;
                    }
                    p{
                        font-size:14px;
                        margin-top:12px;
                        color: #868686;
                    }
                    .btn2{
                        border: none;
                        background:#00af5b;
                        .bgImg{
                            width:36px;
                            height:28px;
                            background:url(../../images/accountMange/gouxuan.png) no-repeat center center;
                            margin:12px 8px;
                        }
                    }
                }
                .btn{
                    width: 56px;
                    height: 56px;
                    border: solid 2px #cccccc;
                    line-height:56px;
                    border-radius:50%;
                    text-align:center;
                    background:#fff;
                    font-size:30px;
                    float:left;
                    display:block;
                    .bgImg{
                        width:36px;
                        height:28px;
                        background:#fff;
                        margin:12px 8px;
                    }
                }
            }
        }
        .appTitle{
            padding:40px 0 30px 0px;
            margin-bottom:30px;
            padding-top:10px;
            font-size:17px;
            border-bottom:1px solid #ECECEC
        }
        .require{
            color:#999999;
            font-size:14px;
            line-height:30px;
        }

       .footer1{
            .el-button{
                width:100px;
            }
            margin-left: 29.3%;
            padding:80px 0 50px 0
        }
        .footer2{
            .el-button{
                width:100px;
            }
            margin-left: 7%;
            padding:80px 0 50px 0
        }
        .clickImg{
            width:130px;
            height:75px;
            margin:10px 0;
            img{
                width:100%;
                height:100%;
            }
        }
        .introduce{
            line-height:30px;
            margin-bottom:50px;
            color:#999999;
            font-size:14px;
        }
    }
    .checkImg2{
        width:100%;
        height:350px;
        img{
            width:100%;
            height:100%;
        }
    }
    .step{
        color:#ff5e2c;
    }
    .mTop{
        margin-top:40px;
    }
}

</style>
